<!--登录页-->
<template>
  <div class="d-flex flex-column flex-root" id="wdiv">
    <div
        class="login login-1 d-flex flex-column flex-lg-row flex-column-fluid bg-white"
        :class="{
        'login-signin-on': this.state === 'signin',
        'login-signup-on': this.state === 'signup',
        'login-forgot-on': this.state === 'forgot'
      }"
        id="kt_login"
    >
      <!--begin::Aside-->
      <div
          class="login-aside d-flex flex-column flex-row-auto"
          v-bind:style="{ backgroundColor: this.backgroundColor }"
      >
        <div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15">
          <a class="text-center mb-10">
            <!--M标志-->
            <img
                src="media/logos/logo-letter-9.png"
                class="max-h-70px"
                alt=""
            />
          </a>
          <h3
              class="font-weight-bolder text-center font-size-h4 font-size-h1-lg"
              v-bind:style="{ color: this.color }"
          >
            {{ $t("landing_page.login.welcome_message") }}
          </h3>
        </div>
        <div class="aside-img d-flex flex-row-fluid bgi-no-repeat bgi-position-y-bottom bgi-position-x-center"
             :style="{ backgroundImage: `url(${backgroundImage})`}"></div>
      </div>
      <!--begin::Aside-->
      <!--begin::Content-->
      <div
          class="login-content flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto"
      >
        <div class="d-flex flex-column-fluid flex-center">
          <!--begin::Signin-->
          <div class="login-form login-signin">
            <form
                class="form"
                novalidate="novalidate"
                id="kt_login_signin_form"
            >
              <div class="pb-13 pt-lg-0 pt-5">
                <h3
                    class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
                >
                  {{ $t("landing_page.login.message") }}
                </h3>
                <span class="text-muted font-weight-bold font-size-h4"
                >{{ $t("landing_page.login.new_user") }}
                  <a
                      v-bind:style="{ color: this.backgroundColor }"
                      id="kt_login_signup"
                      class=" font-weight-bolder"
                      @click="showForm('signup')"
                  >{{ $t("landing_page.login.register") }}</a
                  ></span
                >
              </div>
              <div class="form-group">
                <label class="font-size-h6 font-weight-bolder text-dark"
                >{{ $t("landing_page.login.account") }}</label
                >
                <div
                    id="example-input-group-1"
                    label="" label-for="example-input-1"
                >
                  <input
                      class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
                      :placeholder="$t('landing_page.login.username')"
                      type="text"
                      name="username"
                      ref="username"
                      v-model="form.username"
                      maxlength="8"
                  />
                </div>
              </div>
              <div class="form-group">
                <div class="d-flex justify-content-between mt-n5">
                  <label class="font-size-h6 font-weight-bolder text-dark pt-5"
                  >{{ $t("landing_page.login.password") }}</label
                  >
                  <a
                      v-bind:style="{ color: this.backgroundColor }"
                      class="font-size-h6 font-weight-bolder pt-5"
                      id="kt_login_forgot"
                      @click="showForm('forgot')"
                  >{{ $t("landing_page.login.forget_the_password") }}</a
                  >
                </div>
                <div
                    id="example-input-group-2"
                    label=""
                    label-for="example-input-2"
                >
                  <input
                      class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
                      type="password"
                      name="password"
                      ref="password"
                      :placeholder="$t('landing_page.login.password')"
                      v-model="form.password"
                      autocomplete="off"
                      maxlength="8"
                  />
                </div>
              </div>
              <div class="form-group form-inline">
                <label class="checkbox mb-0" for="check2">
                  <input type="checkbox" name="agree" @click="checkbox(1)" id="check2"/>
                  <span class="mr-2" id="checks"/>{{ $t("landing_page.login.remember_me") }}
                </label>
              </div>
              <div class="pb-lg-0 pb-5">
                <button
                    ref="kt_login_signin_submit"
                    @mouseover="buttonStyle(3)"
                    @mouseout="buttonStyle(4)"
                    id="login"
                    v-bind:style="{
                    borderColor: this.borderColor,
                    backgroundColor: this.backgroundColor,
                    color: this.color,
                  }" class="btn font-weight-bolder font-size-h6 px-15 py-4 my-3 mr-3">
                  {{ $t("landing_page.login.sign_in") }}
                </button>
                <button
                    type="button"
                    id="qqLogin"
                    class="btn font-weight-bolder px-8 py-4 my-3 font-size-lg"
                    v-bind:style="{
                    backgroundColor: this.buttonBackgroundColor,
                    borderColor: 'transparent',
                    color: this.buttonColor,
                  }"
                    @mouseover="buttonStyle(1)"
                    @mouseout="buttonStyle(2)"
                    @click="
                    showModal(1);
                    code5Dialog = true;
                  "
                    v-b-modal.modal-lg
                    v-b-modal.modal-center
                >
                  <span class="svg-icon svg-icon-md">
                    <inline-svg src="media/svg/social-icons/qq1.svg"/>
                  </span>
                  {{ $t("landing_page.login.login_with_qq") }}
                </button>
              </div>
            </form>
          </div>
          <!--end::Signin-->
          <!--    qq模态框      -->
          <div>
            <b-modal
                id="qq-modal"
                centered
                size="lg"
                ref="qq-modal"
                hide-footer
                :title="$t('landing_page.login.qq_secure_login')"
            >
              <div class="d-block text-center">
                <div
                    class="text-center"
                    style="width:auto;height: 344px;"
                    id="qq-html"
                    data-app="true"
                >
                  <v-dialog
                      v-model="code5Dialog"
                      hide-overlay
                      persistent
                      width="300"
                  >
                    <v-card
                        color="primary"
                        dark
                        v-bind:style="{ backgroundColor: this.backgroundColor }"
                    >
                      <v-card-text>
                        {{ $t("landing_page.login.loading") }}
                        <v-progress-linear
                            v-bind:style="{
                            backgroundColor: 'rgb(255 255 255 / 36%)'
                          }"
                            indeterminate
                            color="white"
                            class="mb-0"
                        >
                        </v-progress-linear>
                      </v-card-text>
                    </v-card>
                  </v-dialog>
                </div>
              </div>
            </b-modal>
          </div>
          <!--begin::Signup-->
          <div class="login-form login-signup">
            <form
                class="form"
                novalidate="novalidate"
                id="kt_login_signup_form"
            >
              <div class="pb-13 pt-lg-0 pt-5">
                <h3
                    class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
                >
                  {{ $t("landing_page.register.register") }}
                </h3>
                <p class="text-muted font-weight-bold font-size-h4">
                  {{ $t("landing_page.register.message") }}
                </p>
              </div>
              <div class="form-group">
                <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                    type="text"
                    :placeholder="$t('landing_page.register.account_name')"
                    name="fullName"
                    ref="fullName"
                    autocomplete="off"
                    maxlength="8"
                    :style="{width:this.phoneWidth}"
                />
              </div>

              <div class="form-group">
                <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                    type="text"
                    :placeholder="$t('landing_page.register.phone')"
                    name="phone"
                    ref="rphone"
                    autocomplete="off"
                    maxlength="11"
                    :style="{width:this.phoneWidth}"
                />
              </div>
              <div class="form-group form-inline">
                <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                    type="text"
                    :placeholder="$t('landing_page.forget_the_password.verification_code')"
                    name="phoneCode"
                    ref="phoneCode"
                    autocomplete="off"
                    maxlength="6"
                    :style="{marginRight:' 6px',width: this.codeWidth}"
                />
                <button type="button"
                        :style="{
                    backgroundColor: this.backgroundColor,
                    color:this.color,
                    height :this.sendOutHeight,
                    width:this.sendOut1Width}"
                        ref="kt_login_signup_sendOutCode"
                        @click="sendOut(1)"
                        class="btn font-weight-bolder font-size-h7 px-7 py-3 my-2">
                  {{ $t('landing_page.forget_the_password.send_verification_code') }}
                </button>
              </div>
              <div class="form-group">
                <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                    type="password"
                    :placeholder="$t('landing_page.register.password')"
                    name="password"
                    ref="rpassword"
                    autocomplete="off"
                    maxlength="8"
                    :style="{width:this.phoneWidth}"
                />
              </div>
              <div class="form-group">
                <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                    type="password"
                    :placeholder="$t('landing_page.register.confirm_password')"
                    name="confirmPassword"
                    ref="confirmPassword"
                    autocomplete="off"
                    maxlength="8"
                    :style="{width:this.phoneWidth}"
                />
              </div>
              <div class="form-group form-inline">
                <label class="checkbox mb-0" for="check1">
                  <input type="checkbox" name="agree" @click="checkbox(2)" id="check1"/>
                  <span class="mr-2" id="check"/>{{ $t("landing_page.register.i_agree") }}
                </label><a style="margin-left: -0.5rem !important;" v-bind:style="{ color: this.backgroundColor }"
                           @click="showModal(2)">{{ $t("landing_page.register.terms_and_conditions") }}</a>&nbsp;&nbsp;&nbsp;
              </div>
              <div class="form-group d-flex flex-wrap pb-lg-0 pb-3">
                <button
                    ref="kt_login_signup_submit"
                    v-bind:style="{
                    borderColor: this.borderColor,
                    backgroundColor: this.backgroundColor,
                    color: this.color,
                    width:this.fsubmit,
                  }"
                    @mouseover="buttonStyle(3)"
                    @mouseout="buttonStyle(4)"
                    class="btn font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4"
                    style="width:150px;"
                >
                  {{ $t("landing_page.register.submit") }}
                </button>
                <button
                    type="button"
                    id="kt_login_signup_cancel"
                    v-bind:style="{
                    backgroundColor: this.buttonBackgroundColor,
                    borderColor: 'transparent',
                    color: this.buttonColor,
                  }"
                    class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3"
                    @mouseover="buttonStyle(1)"
                    @mouseout="buttonStyle(2)"
                    @click="showForm('signin')"
                >
                  {{ $t("landing_page.register.return") }}
                </button>
              </div>
            </form>
          </div>
          <!--end::Signup-->
          <!--begin::Forgot-->
          <div class="login-form login-forgot">
            <!--begin::Form-->
            <form class="form col-lg-12" novalidate="novalidate" id="kt_login_forgot_form">
              <div class="pb-13 pt-lg-0 pt-5">
                <a class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg">
                  {{ $t("landing_page.forget_the_password.forget_the_password") }}
                </a>
                <p class="text-muted font-weight-bold font-size-h4">
                  {{ $t("landing_page.forget_the_password.message") }}
                </p>
              </div>
              <div class="form-group">
                <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                    type="text"
                    :placeholder="$t('landing_page.forget_the_password.phone')"
                    name="forgetPhone"
                    ref="forgetPhone"
                    autocomplete="off"
                    maxlength="11"
                    :style="{width:phoneWidth}"
                />
              </div>
              <div class="form-group form-inline">
                <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                    type="text"
                    :placeholder="$t('landing_page.forget_the_password.verification_code')"
                    name="verCode"
                    ref="verCode"
                    autocomplete="off"
                    maxlength="6"
                    :style="{width:codeWidth}"
                    style="margin-right: 6px;width: 246px"
                />
                <button
                    type="button"
                    class="btn font-weight-bolder font-size-h7 px-7 py-3 my-2"
                    :style="{
                    backgroundColor: this.backgroundColor,
                    color:this.color,
                    height :this.sendOutHeight,
                    width:this.sendOutWidth}"
                    ref="kt_login_forgot_sendOutCode"
                    @click="sendOut(2)"
                >{{ $t("landing_page.forget_the_password.send_verification_code") }}
                </button>
              </div>
              <div class="form-group">
                <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                    type="password"
                    :placeholder="$t('landing_page.forget_the_password.password')"
                    name="forgetFPassword"
                    ref="fpassword"
                    autocomplete="off"
                    maxlength="11"
                    :style="{width:passwordWidth}"
                />
              </div>
              <div class="form-group">
                <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                    type="password"
                    :placeholder="$t('landing_page.forget_the_password.confirm_password')"
                    name="forgetForPassword"
                    ref="forpassword"
                    autocomplete="off"
                    maxlength="11"
                    :style="{width:confirmPasswordWidth}"
                />
              </div>
              <div class="form-group d-flex flex-wrap pb-lg-0">
                <button
                    @mouseover="buttonStyle(3)"
                    @mouseout="buttonStyle(4)"
                    ref="kt_login_forgot_submit"
                    v-bind:style="{
                    borderColor: this.borderColor,
                    backgroundColor: this.backgroundColor,
                    color: this.color,
                    width:this.fsubmit,
                  }"
                    @click="forGotSubMit()"
                    class="btn font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4"
                >
                  {{ $t("landing_page.forget_the_password.submit") }}
                </button>
                <button
                    type="button"
                    v-bind:style="{
                    backgroundColor: this.buttonBackgroundColor,
                    borderColor: 'transparent',
                    color: this.buttonColor,
                  }"
                    class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3"
                    @mouseover="buttonStyle(1)"
                    @mouseout="buttonStyle(2)"
                    @click="showForm('signin')"
                >
                  {{ $t("landing_page.forget_the_password.return") }}
                </button>
              </div>
            </form>
          </div>
          <!--end::Forgot-->
        </div>
        <!--begin::Content footer-->
        <div
            class="d-flex justify-content-lg-start justify-content-center align-items-end py-7 py-lg-0"
        >
          <a
              @click="showModal(2)"
              v-b-modal.modal-xl
              id="tk"
              class="font-weight-bolder font-size-h5"
              v-bind:style="{ color: this.backgroundColor }"
          >{{ $t("landing_page.login.clause") }}</a>
          <!--    条款模态框      -->
          <div>
            <b-modal
                id="tk-modal"
                centered
                size="xl"
                ref="tk-modal"
                hide-footer
                :title="$t('landing_page.login.clause')"
            >
              <div class="d-block">
                <b>{{ TermsAndConditions.title }}</b>
                <span v-html="TermsAndConditions.content"></span>
                <br/>
                <b style="font-size: large">{{ TermsAndConditions.policy }}</b>
              </div>
            </b-modal>
          </div>

          <span class="ml-10 font-weight-bolder font-size-h5"></span>
          <a
              id="about"
              class="ml-10 font-weight-bolder font-size-h5"
              v-bind:style="{ color: this.backgroundColor }"
              @click="makeToast(5000)"
          >{{ $t("landing_page.login.about") }} </a
          >
        </div>
        <!--end::Content footer-->
      </div>
      <!--end::Content-->
    </div>

    <div>
      <div class="sticky-toolbar nav flex-column pl-2 pr-2 pt-3 pb-3 mt-4">
        <div class="d-flex flex-column text-md-center">
          <div>
            <b-button id="popover-button-event"
                      @mouseover="buttonSettingColor(true)"
                      @mouseout="buttonSettingColor(false)"
                      class="btn btn-sm btn-icon btn-bg-light"
                      v-bind:style="{backgroundColor: buttonSetting.backgroundColor
                }">
              <i class="flaticon2-gear" id="flaticon2-gear"
                 v-bind:style="{color: buttonSetting.color,
                      backgroundColor: buttonSetting.backgroundColor}"></i>
            </b-button>
          </div>
          <b-popover ref="popover" target="popover-button-event"
                     :title="$t('landing_page.login.switch_colors')"
                     triggers="hover focus">
            <div>
              <b-button
                  style="width: 50px;height: 30px;background-color: rgb(35, 206, 198)"
                  @click="changeStyle(0)"
              >
                <v-icon
                    v-show="colorState === 0"
                    :style="{
                        color: colorLists[Math.floor(Math.random() * 10)],
                        'font-size': '18px',
                        left: '11px'
                      }"
                >
                  mdi-heart
                </v-icon>
              </b-button>
              &nbsp;
              <b-button
                  style="width: 50px;height: 30px;background-color: rgb(105, 147, 255)"
                  @click="changeStyle(1)"
              >
                <v-icon
                    v-show="colorState === 1"
                    :style="{
                        color: colorLists[Math.floor(Math.random() * 10)],
                        'font-size': '18px',
                        left: '11px'
                      }"
                >
                  mdi-heart
                </v-icon>
              </b-button>
              &nbsp;
              <b-button
                  style="width: 50px;height: 30px;background-color: rgb(166 ,224 ,38)"
                  @click="changeStyle(2)"
              >
                <v-icon
                    v-show="colorState === 2"
                    :style="{
                        color: colorLists[Math.floor(Math.random() * 10)],
                        'font-size': '18px',
                        left: '11px'
                      }"
                >
                  mdi-heart
                </v-icon>
              </b-button>
              <br/><br/>
              <b-button
                  style="width: 50px;height: 30px;background-color: rgb(236, 86, 101)"
                  @click="changeStyle(3)"
              >
                <v-icon
                    v-show="colorState === 3"
                    :style="{
                        color: colorLists[Math.floor(Math.random() * 10)],
                        'font-size': '18px',
                        left: '11px'
                      }"
                >
                  mdi-heart
                </v-icon>
              </b-button>
              &nbsp;
              <b-button
                  style="width: 50px;height: 30px;background-color: rgb(132, 73, 255)"
                  @click="changeStyle(4)"
              >
                <v-icon
                    v-show="colorState === 4"
                    :style="{
                        color: colorLists[Math.floor(Math.random() * 10)],
                        'font-size': '18px',
                        left: '11px'
                      }"
                >
                  mdi-heart
                </v-icon>
              </b-button>
              &nbsp;
              <b-button
                  style="width: 50px;height: 30px;background-color: rgb(255, 175, 25)"
                  @click="changeStyle(5)"
              >
                <v-icon
                    v-show="colorState === 5"
                    :style="{
                        color: colorLists[Math.floor(Math.random() * 10)],
                        'font-size': '18px',
                        left: '11px'
                      }"
                >
                  mdi-heart
                </v-icon>
              </b-button>
            </div>
          </b-popover>
        </div>
      </div>
    </div>
    <div>
      <Vcode :successText="$t('landing_page.login.verification_successful')"
             :failText="$t('landing_page.login.validation_failed')"
             :sliderText="$t('landing_page.login.drag')"
             :puzzleScale="0.7"
             :canvasWidth=400
             :canvasHeight=180
             :imgs="[img1,img2,img3,img4,img5,img6,img7,img8,img9,img10]"
             :show="isShow" @success="onSuccess" @close="onClose"/>
    </div>
  </div>
</template>
<!-- Load login custom page styles -->
<style lang="scss">
//登录页样式
@import "src/assets/sass/pages/login/login-1.scss";
</style>
<script>
import img1 from "/public/media/img/1.jpg";
import img2 from "/public/media/img/2.jpg";
import img3 from "/public/media/img/3.jpg";
import img4 from "/public/media/img/4.jpg";
import img5 from "/public/media/img/5.jpg";
import img6 from "/public/media/img/6.jpg";
import img7 from "/public/media/img/7.jpg";
import img8 from "/public/media/img/8.jpg";
import img9 from "/public/media/img/9.jpg";
import img10 from "/public/media/img/10.jpg";
// 表单验证插件
import formValidation from "@/assets/plugins/formvalidation/dist/es6/core/Core";
import Trigger from "@/assets/plugins/formvalidation/dist/es6/plugins/Trigger";
import Bootstrap from "@/assets/plugins/formvalidation/dist/es6/plugins/Bootstrap";
import SubmitButton from "@/assets/plugins/formvalidation/dist/es6/plugins/SubmitButton";
import KTUtil from "@/assets/js/components/util";
import {mapGetters, mapState} from "vuex";
import {
  ABOUT,
  CLAUSE,
  LOGIN,
  LOGOUT,
  QQLOGIN,
  REGISTER, SEND_VERIFICATION_CODE, VERIFICATION_CODE
} from "@/core/services/store/auth.module";
import Sweetalert from "sweetalert2";
//Jquery
import $ from "jquery";
import Vcode from "vue-puzzle-vcode";
import i18n from "@/core/plugins/vue-i18n";
import cookie from "jquery.cookie";
import {Base64} from 'js-base64';

export default {
  name: "login",
  components: {
    Vcode,
  },
  data() {
    return {
      img1,
      img2,
      img3,
      img4,
      img5,
      img6,
      img7,
      img8,
      img9,
      img10,
      state: "signin",
      form: {
        username: "",
        password: ""
      },
      isShow: false,
      code5Dialog: false,
      backgroundColor: "rgb(35, 206, 198)",
      buttonColor: "rgb(35, 206, 198)",
      color: "rgb(255, 255, 255)",
      borderColor: "rgb(35, 206, 198)",
      colorState: 0,
      buttonBackgroundColor: "rgb(225, 233, 255)",
      buttonSetting: {
        color: "",
        backgroundColor: ""
      },
      toastCount: 0,
      colorLists: [
        "rgb(229,0,19)",
        "rgb(233,0,210)",
        "rgb(45,185,145)",
        "rgb(166,0,130)",
        "rgb(237,108,0)",
        "rgb(240, 28, 131)",
        "rgb(84, 21, 226)",
        "rgb(0,128,0)",
        "rgb(147,243,150)",
        "rgb(178,34,34)",
        "rgb(45,45,49)"
      ],
      placements: ["Switch colors"],
      TermsAndConditions: {
        title: "",
        content: "",
        policy: ""
      },
      sendOutHeight: "",
      sendOutWidth: "172px",
      codeWidth: "246px",
      phoneWidth: "415px",
      confirmPasswordWidth: "415px",
      passwordWidth: "415px",
      sendOutStatus: false,
      fsubmit: "",
      sendOut1Width: "",
    };
  },
  computed: {
    ...mapState({
      errors: state => state.auth.errors
    }),
    ...mapGetters(["currentUser"]),
    backgroundImage() {
      //随机切换背景图
      let ran = sessionStorage.getItem("random");
      if (ran == null) ran = 1;
      return (
          process.env.BASE_URL + "media/svg/illustrations/login-visual-" + ran + ".svg"
      );
    }
  },
  beforeMount() {
    //主题设置 存入本地用于关闭浏览器后再次访问还是上次设置的颜色
    let number = localStorage.getItem("style");
    //判断设置的主题
    if (number !== null) {
      if (number === "0") {
        this.changeStyle(0);
      } else if (number === "1") {
        this.changeStyle(1);
      } else if (number === "2") {
        this.changeStyle(2);
      } else if (number === "3") {
        this.changeStyle(3);
      } else if (number === "4") {
        this.changeStyle(4);
      } else if (number === "5") {
        this.changeStyle(5);
      }
    } else {
      this.changeStyle(0);
    }
    //true 手机端 or false pc端
    let qqLogin = sessionStorage.getItem("qqLogin");
    if (qqLogin === "true") {
      this.passwordWidth = "100%";
      this.confirmPasswordWidth = "100%";
      this.phoneWidth = "100%";
      this.codeWidth = "56%";
      this.fsubmit = "52%";
      this.sendOut1Width = "41%";
      this.sendOutHeight = "62px";
      this.sendOutWidth = "41%";
      let random1 = random(false);
      sessionStorage.setItem("random", random1);
    } else {
      this.fsubmit = "120px";
      this.sendOut1Width = "36%";
      this.passwordWidth = "415px";
      this.confirmPasswordWidth = "415px";
      this.phoneWidth = "415px";
      this.codeWidth = "246px";
      this.sendOutHeight = "68px";
      this.sendOutWidth = "38%";
      let random2 = random(true);
      sessionStorage.setItem("random", random2);
    }
  },
  mounted() {
    //切换颜色中的小齿轮颜色
    $("#flaticon2-gear").css('color', 'rgb(181, 181, 195)');
    //清空所有信息
    //localStorage.clear();
    $(".range-slider").css("backgroundColor", "rgb(35 206 198 / 62%)");
    //密码错误校验设置
    if (sessionStorage.getItem("passwordError") >= 3) {
      $("#login").text(i18n.t('landing_page.login.verification'));
    }
    //滑动验证码刷新绿色按钮
    $(".reset_").css("width", "28px");
    //滑块区域高度
    $(".range-box").css("height", "39px");
    let rangeBtn = $(".range-btn");
    //滑块点的颜色
    rangeBtn.find("div").css("border", "solid 1px " + this.backgroundColor);
    //在当前主题色下透明滑块背景色
    $(".range-box .range-slider").css("backgroundColor", this.backgroundColor.split(")")[0] + ",0.64)");
    //登录
    const signin_form = KTUtil.getById("kt_login_signin_form");
    //注册
    const signup_form = KTUtil.getById("kt_login_signup_form");
    //忘记密码
    const forgot_form = KTUtil.getById("kt_login_forgot_form");
    //登录数据验证
    this.fv = formValidation(signin_form, {
      fields: {
        username: {
          message: i18n.t('landing_page.login.usernameMessage'),
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.usernameM')
            },
            stringLength: {
              min: 4,
              max: 8,
              message: i18n.t('landing_page.login.usernameL')
            },
            regexp: {
              regexp: /^[a-zA-Z0-9_]+$/,
              message: i18n.t('landing_page.login.usernameF')
            }
          }
        },
        password: {
          message: i18n.t('landing_page.login.password'),
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.passwordM')
            },
            stringLength: {
              min: 4,
              max: 8,
              message: i18n.t('landing_page.login.passwordL')
            }
          }
        }
      },
      //插件
      plugins: {
        trigger: new Trigger(),
        submitButton: new SubmitButton(),
        bootstrap: new Bootstrap()
      }
    });
    //登录功能
    this.fv.on("core.form.valid", () => {
      //获取data中数据
      const username = this.form.username;
      const password = this.form.password;
      //将 spinner 微调器设置为提交按钮
      let submitButton = this.$refs["kt_login_signin_submit"];
      submitButton.classList.add("spinner", "spinner-light", "spinner-right");
      if (sessionStorage.getItem("passwordError") >= 3) {
        this.submit();
      } else {
        this.$store.dispatch(LOGOUT).then(() => {
          // 发送登录请求 this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)
          this.$store
              .dispatch(LOGIN, {username, password})
              // 登录成功后转到哪个页面
              .then(() => {
                this.$router.push({name: "dashboard"});
                submitButton.classList.remove(
                    "spinner",
                    "spinner-light",
                    "spinner-right"
                );
                //登录成功后如用户点击了"记住我"的选项将会保存cookie以便下次登录
                if ($('#check2').prop("checked")) {
                  $.cookie("user", username, {expires: 1, path: '/'});
                  //加密密码
                  $.cookie("pass", Base64.encode(password), {expires: 1, path: '/'});
                } else {
                  //删除cookie信息
                  removeCookie();
                }
              })
              .catch(data => {
                console.log("后端数据:", data);
                if (data !== undefined) {
                  if (data.message === "Network Error") {
                    this.Swl(i18n.t('landing_page.login.connection_timed_out'), "error");
                  } else if (data.message === "Request failed with status code 404") {
                    this.Swl(i18n.t('landing_page.login.Connection_error'), "error");
                  } else if (data.data >= 3 && data.message === "密码错误") {
                    sessionStorage.setItem("passwordError", data.data);
                    $("#login").text(i18n.t('landing_page.login.verification'))
                    this.Swl(i18n.t('landing_page.login.passwordCW'), "error");
                    //删除cookie
                    removeCookie();
                  } else {
                    if (data.message === "密码错误") this.Swl(i18n.t('landing_page.login.passwordCW'), "error");
                    else if (data.message === "内部错误") this.Swl(i18n.t('landing_page.login.internal_error'), "error");
                    else if (data.message === "用户不存在") this.Swl(i18n.t('landing_page.login.account_name_does_not_exist'), "error");
                    else if (data.message === "账号过期") this.Swl(i18n.t('landing_page.login.account_expired'), "error");
                    else if (data.message === "密码过期") this.Swl(i18n.t('landing_page.login.password_expired'), "error");
                    else if (data.message === "用户被禁用") this.Swl(i18n.t('landing_page.login.user_disabled'), "error");
                    else if (data.message === "用户被锁定") this.Swl(i18n.t('landing_page.login.user_locked'), "error");
                    else this.Swl(data.message, "error")
                  }
                  submitButton.classList.remove(
                      "spinner",
                      "spinner-light",
                      "spinner-right"
                  );
                } else {
                  this.Swl(i18n.t('landing_page.login.connection_timed_out'), "error");
                  submitButton.classList.remove(
                      "spinner",
                      "spinner-light",
                      "spinner-right"
                  );
                }
              });
        });
      }
    });
    this.fv.on("core.form.invalid", () => {
      this.Swl(i18n.t('landing_page.login.please_check_the_information'), "error");
    });
    //注册数据验证
    this.fv1 = formValidation(signup_form, {
      fields: {
        fullName: {
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.usernameM')
            },
            stringLength: {
              min: 4,
              max: 8,
              message: i18n.t('landing_page.login.usernameL')
            },
            regexp: {
              regexp: /^[a-zA-Z0-9_]+$/,
              message: i18n.t('landing_page.login.usernameF')
            }
          }
        },
        phone: {
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.phone')
            },
            stringLength: {
              min: 11,
              max: 11,
              message: i18n.t('landing_page.login.phoneL')
            },
            regexp: {
              regexp: /^1[3|4|5|7|8][0-9]{9}$/,
              message: i18n.t('landing_page.login.phoneM')
            }
          }
        },
        phoneCode: {
          message: i18n.t('landing_page.login.verification_codeM'),
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.verification_codeX')
            }, stringLength: {
              min: 4,
              max: 6,
              message: i18n.t('landing_page.login.verification_codeL')
            },
          }
        },
        password: {
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.passwordM')
            },
            stringLength: {
              min: 4,
              max: 8,
              message: i18n.t('landing_page.login.passwordL')
            }
          }
        },
        confirmPassword: {
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.passwordC')
            },
            identical: {
              compare: function () {
                return signup_form.querySelector('[name="password"]').value;
              },
              message: i18n.t('landing_page.login.passwordE')
            }
          }
        },
        agree: {
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.clauseM')
            }
          }
        }
      },
      //插件
      plugins: {
        trigger: new Trigger(),
        submitButton: new SubmitButton(),
        bootstrap: new Bootstrap()
      }
    });

    //注册功能
    this.fv1.on("core.form.valid", () => {
      //将 spinner 微调器设置为提交按钮
      let submitButton = this.$refs["kt_login_signup_submit"];
      submitButton.classList.add("spinner", "spinner-light", "spinner-right");
      console.log("....");
      if (!this.sendOutStatus) {
        this.Swl(i18n.t('landing_page.register.click_send'), "error");
      } else {
        // 发送注册请求
        this.$store.dispatch(REGISTER, {
          username: this.$refs.fullName.value,
          phone: this.$refs.rphone.value,
          password: this.$refs.rpassword.value,
          phoneCode: this.$refs.phoneCode.value
        }).then((data) => {
          this.$router.push({name: "dashboard"});
          this.Swl(i18n.t('landing_page.login.message') + " " + data.data.username, "success");
          submitButton.classList.remove(
              "spinner",
              "spinner-light",
              "spinner-right"
          );
        }).catch(e => {
          if (e === undefined) {
            this.Swl(i18n.t('landing_page.login.connection_timed_out'), "error");
          } else {
            if (e.message === "账户已存在") {
              this.Swl(i18n.t('landing_page.register.account_name_already_exists'), "error");
            } else if (e.message === "验证码错误") {
              this.Swl(i18n.t('landing_page.login.verification_codeM'), "error");
            } else if (e.message === "验证码过期请重新获取") {
              this.Swl(i18n.t('landing_page.register.verification_code_expired'), "error");
            } else if (e.message === "一个手机号只能注册一个账户") {
              this.Swl(i18n.t('landing_page.register.one_to_one_cell_phone_number'), "error");
            } else {
              this.Swl(e.message, "error");
            }
          }
          submitButton.classList.remove(
              "spinner",
              "spinner-light",
              "spinner-right"
          );
        });
      }
    });
    this.fv1.on("core.form.invalid", () => {
      this.Swl(i18n.t('landing_page.login.please_check_the_information'), "error");
    });

    //忘记密码数据验证
    this.fv2 = formValidation(forgot_form, {
      fields: {
        forgetPhone: {
          message: i18n.t('landing_page.login.phoneC'),
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.phone')
            },
            stringLength: {
              min: 11,
              max: 11,
              message: i18n.t('landing_page.login.phoneL')
            },
            regexp: {
              regexp: /^1[3|4|5|7|8][0-9]{9}$/,
              message: i18n.t('landing_page.login.phoneM')
            }
          }
        },
        verCode: {
          message: i18n.t('landing_page.login.verification_codeM'),
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.verification_codeX')
            }, stringLength: {
              min: 4,
              max: 6,
              message: i18n.t('landing_page.login.verification_codeL')
            },
          }
        },
        forgetFPassword: {
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.passwordM')
            },
            stringLength: {
              min: 4,
              max: 8,
              message: i18n.t('landing_page.login.passwordL')
            }
          }
        },
        forgetForPassword: {
          validators: {
            notEmpty: {
              message: i18n.t('landing_page.login.passwordC')
            },
            identical: {
              compare: function () {
                return forgot_form.querySelector('[name="forgetFPassword"]').value;
              },
              message: i18n.t('landing_page.login.passwordE')
            }
          }
        }
      },
      //插件
      plugins: {
        trigger: new Trigger(),
        submitButton: new SubmitButton(),
        bootstrap: new Bootstrap()
      }
    });

    this.fv2.on("core.form.invalid", () => {
      this.Swl(i18n.t('landing_page.login.please_check_the_information'), "error");
    });
    //弹出框
    this.Swl = function (text, icon) {
      //函数显示一个简单的Sweetalert2弹出窗口。
      Sweetalert.fire({
        text: text,
        icon: icon,
        confirmButtonColor: this.backgroundColor,
        heightAuto: false
      });
    };
    //获取浏览器cookie信息
    let user = $.cookie('user');
    let pass = $.cookie("pass");
    //当浏览器中有cookie信息将会直接设置到输入框中
    if (user !== undefined && pass !== undefined) {
      this.form.username = user;
      //解密密码
      this.form.password = Base64.decode(pass);
      //获取到cookie时将单选框设置选中状态
      //获取到cookie时将单选框设置选中状态
      $("#checks").css("background-color", this.backgroundColor);
      $("#check2").prop("checked", true);
    }
  },
  //事件
  methods: {
    makeToast(append) {
      //请求 "关于" 信息
      this.$store.dispatch(ABOUT, {id: i18n.t('landing_page.login.id')}).then(data => {
        let message = data.data.message;
        this.$bvToast.toast(message, {
          headerClass: 'red',
          title: i18n.t('landing_page.login.about'),
          autoHideDelay: append,
          noAutoHide: false
        })
      }).catch(() => {
        this.Swl(i18n.t('landing_page.login.connection_timed_out'), "error");
      });
    },
    //切换页面
    showForm(form) {
      this.state = form;
      let form_name = "kt_login_" + form + "_form";
      KTUtil.animateClass(
          KTUtil.getById(form_name), "animate__animated animate__backInUp"
      );
    },
    switch() {
      this.color = "rgb(255, 255, 255)";
      this.borderColor = this.color;
      this.buttonColor = this.backgroundColor;
    },
    //切换主题颜色
    changeStyle: function (state) {
      if (state === 0) {
        this.colorState = 0;
        this.backgroundColor = "rgb(35, 206, 198)";
        this.switch();
        //设置注册单选框style
        $(".range-slider").css("backgroundColor", "rgb(35 206 198 / 62%)");
        localStorage.setItem("style", "0");
      } else if (state === 1) {
        this.colorState = 1;
        this.backgroundColor = "rgb(105, 147, 255)";
        this.switch();
        $(".range-slider").css("backgroundColor", "rgb(105 147 255 / 62%)");
        localStorage.setItem("style", "1");
      } else if (state === 2) {
        this.colorState = 2;
        this.backgroundColor = "rgb(166 ,224 ,38)";
        this.switch();
        $(".range-slider").css("backgroundColor", "rgb(166 224 38 / 62%)");
        localStorage.setItem("style", "2");
      } else if (state === 3) {
        this.colorState = 3;
        this.backgroundColor = "rgb(236, 86, 101)";
        this.switch();
        $(".range-slider").css("backgroundColor", "rgb(236 86 101 / 62%)");
        localStorage.setItem("style", "3");
      } else if (state === 4) {
        this.colorState = 4;
        this.backgroundColor = "rgb(132, 73, 255)";
        this.switch();
        $(".range-slider").css("backgroundColor", "rgb(132 73 255 / 62%)");
        localStorage.setItem("style", "4");
      } else if (state === 5) {
        this.colorState = 5;
        this.backgroundColor = "rgb(255, 175, 25)";
        this.switch();
        $(".range-slider").css("backgroundColor", "rgb(255 175 25 / 62%)");
        localStorage.setItem("style", "5");
      }
      //切换颜色时将单选框设置未选中状态
      $("#check1").prop("checked", false);
      //以及背景色设置为空
      $("#check").css("background-color", "");
      //切换颜色时将单选框设置未选中状态
      $("#check2").prop("checked", false);
      //以及背景色设置为空
      $("#checks").css("background-color", "");
    },
    //按钮颜色
    buttonStyle(index) {
      if (index === 1) {
        this.buttonBackgroundColor = this.buttonColor;
        this.buttonColor = "rgb(255, 255, 255)";
      } else if (index === 2) {
        this.buttonColor = this.buttonBackgroundColor;
        this.buttonBackgroundColor = "rgb(225, 233, 255)";
      } else if (index === 3) {
        this.borderColor = "rgb(116,108,108)";
      } else if (index === 4) {
        this.borderColor = this.backgroundColor;
      }
    },
    //单选框颜色
    checkbox(zt) {
      //获取check的状态
      if (event.target.checked) {
        if (zt === 1) {
          $("#checks").css("background-color", this.backgroundColor);
        } else {
          $("#check").css("background-color", this.backgroundColor);
        }
      } else {
        if (zt === 1) {
          $("#checks").css("background-color", "");
        } else {
          $("#check").css("background-color", "");
        }
      }
    },
    //主题设置按钮颜色
    buttonSettingColor(state) {
      if (state === true) {
        this.buttonSetting.color = this.color;
        this.buttonSetting.backgroundColor = this.backgroundColor;
      } else if (state === false) {
        this.buttonSetting.color = "#B5B5C3";
        this.buttonSetting.backgroundColor = "#F3F6F9";
      }
    },
    //模态框配置
    showModal(state) {
      //获取访问设备标识
      let qqLogin = sessionStorage.getItem("qqLogin");
      //判断条件为qq登录的情况
      if (state === 1 && qqLogin === "false") {
        //请求后台qq登录接口
        this.$store.dispatch(QQLOGIN, {state: true}).then(data => {
          $("#qq-html").html(data);
          $(".page_accredit").css("width", "755px");
          $(".lay_main").css("margin-left", "0px");
        }).catch(() => {
          //连接超时关闭模态框并提示错误信息
          this.$refs["qq-modal"].hide();
          this.Swl(i18n.t('landing_page.login.connection_timed_out'), "error");
        });
        //显示模态框
        this.$refs["qq-modal"].show();
      } else if (state === 1 && qqLogin === "true") {
        //手机端访问qq登录的情况
        this.$store.dispatch(QQLOGIN, {state: false}).then(data => {
          window.location.href = data;
        }).catch(() => {
          //连接超时提示错误信息
          this.Swl(i18n.t('landing_page.login.connection_timed_out'), "error");
        });
        //条款模态框显示
      } else if (state === 2) {
        //请求后台条款接口
        this.$store.dispatch(CLAUSE, {id: i18n.t('landing_page.login.id')}).then(data => {
          this.TermsAndConditions.title = data.data.title;
          this.TermsAndConditions.content = data.data.content;
          this.TermsAndConditions.policy = data.data.policy;
          this.$refs["tk-modal"].show();
        }).catch(() => {
          //连接超时关闭模态框并提示错误信息
          this.$refs["tk-modal"].hide();
          this.Swl(i18n.t('landing_page.login.connection_timed_out'), "error");
        });
      }
    },
    submit() {
      this.isShow = true;
    },
    onSuccess() {
      this.isShow = false; // 通过验证后，关闭模态框
      //将 spinner 加载器设置为提交按钮
      let submitButton = this.$refs["kt_login_signin_submit"];
      submitButton.classList.remove("spinner", "spinner-light", "spinner-right");
      $("#login").text(i18n.t('landing_page.login.sign_in'));
      sessionStorage.removeItem("passwordError");
    },
    onClose() {
      this.isShow = false;
      //将 spinner 微调器设置为提交按钮
      let submitButton = this.$refs["kt_login_signin_submit"];
      submitButton.classList.remove("spinner", "spinner-light", "spinner-right");
    },
    sendOut(zt) {
      let sendOut = $("#sendOut");
      let phone;
      let submitButton;
      this.sendOutStatus = true;
      if (zt === 1) {
        //注册时
        phone = this.$refs.rphone.value;
        submitButton = this.$refs["kt_login_signup_sendOutCode"];
      } else {
        //忘记密码时
        phone = this.$refs.forgetPhone.value;
        submitButton = this.$refs["kt_login_forgot_sendOutCode"];
      }
      if (phone !== "" && phone.length === 11) {
        if (/^1[3|4|5|7|8][0-9]{9}$/.test(phone)) {
          submitButton.classList.add("spinner", "spinner-light", "spinner-right");
          this.$store.dispatch(SEND_VERIFICATION_CODE, {phone: phone, zt: zt}).then(data => {
            this.Swl(data.message, "success");
          }).catch(data => {
            if (data.message === "这个手机号没有绑定账户") {
              this.Swl(i18n.t("landing_page.forget_the_password.phone_verification"), "error");
            } else if (data.message === "发送失败") {
              this.Swl(i18n.t("landing_page.login.fail_in_send"), "error");
            } else if (data.message === "Network Error") {
              this.Swl(i18n.t('landing_page.login.connection_timed_out'), "error");
            } else {
              this.Swl(data.message, "error");
            }
            submitButton.classList.remove(
                "spinner",
                "spinner-light",
                "spinner-right"
            );
            sendOut.removeAttr("disabled");
            sendOut.text(i18n.t('landing_page.forget_the_password.send_verification_code'));
          })
          sendOut.attr("disabled", "disabled");
          sendOut.text(i18n.t('landing_page.forget_the_password.issued_verification_code'));
          setTimeout(function () {
            submitButton.classList.remove(
                "spinner",
                "spinner-light",
                "spinner-right"
            );
            sendOut.removeAttr("disabled");
            sendOut.text(i18n.t('landing_page.forget_the_password.send_verification_code'));
          }, 30000);
        } else {
          this.Swl(i18n.t('landing_page.login.phoneM'), "error");
        }
      } else {
        if (phone === "") {
          this.Swl(i18n.t('landing_page.login.phone'), "error");
        } else if (/^1[3|4|5|7|8][0-9]{9}$/.test(phone)) {
          this.Swl(i18n.t('landing_page.login.phoneM'), "error");
        } else if (phone.length < 11) {
          this.Swl(i18n.t('landing_page.login.phoneL'), "error");
        }
      }
    },
    forGotSubMit() {
      //获取参数
      const phone = this.$refs.forgetPhone.value;
      const verCode = this.$refs.verCode.value;
      const forPassword = this.$refs.forpassword.value;
      const fPassword = this.$refs.fpassword.value;
      //创建加载器
      let submitButton = this.$refs["kt_login_forgot_submit"];
      submitButton.classList.add("spinner", "spinner-light", "spinner-right");
      //判断数据正确性
      if (phone !== "" && verCode !== "" && forPassword !== "" && fPassword !== "") {
        if (forPassword === fPassword) {
          //发送post请求
          this.$store.dispatch(VERIFICATION_CODE, {
            phone: phone,
            phoneCode: verCode,
            password: forPassword
          }).then(data => {
            if (data.message === "密码已修改") {
              this.showForm('signin');
              this.Swl(data.message, "success");
            }
            submitButton.classList.remove("spinner", "spinner-light", "spinner-right");
          }).catch(data => {
            if (data.message === "Network Error") {
              this.Swl(i18n.t('landing_page.login.connection_timed_out'), "error");
            } else {
              this.Swl(data.message, "error");
            }
            submitButton.classList.remove("spinner", "spinner-light", "spinner-right");
          });
        }
      } else {
        submitButton.classList.remove("spinner", "spinner-light", "spinner-right");
      }
    },
    Open() {
      this.$refs.popover.$emit('open')
    },
    Close() {
      this.$refs.popover.$emit('close')
    }
  }, watch: {
    code5Dialog(val) {
      if (!val) return;
      setTimeout(() => (this.code5Dialog = false), 1000);
    }
  }
};

function random(state) {
  if (state) {
    return Math.ceil(Math.random() * 6)
  } else {
    return Math.ceil(Math.random() * 2)
  }
}

//删除cookie方法
function removeCookie() {
  $.removeCookie('user', {path: '/'});
  $.removeCookie('pass', {path: '/'});
}
</script>
<style lang="css">
/*解决手机端无法滑动的情况*/
#wdiv {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
</style>
